<template>
    <div class="box">
        <div class="wrap">
            <el-input
            :placeholder="searchAndBtn.placeholder"
            v-model="input"
            clearable
            :disabled="$store.state.loading ? false : true"
            >
            </el-input>

            <button class="btn" :style="{ cursor: $store.state.loading ? 'pointer' : 'not-allowed' }">{{ searchAndBtn.btnName }}</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SearchAndBtn',
    props: ['searchAndBtn'],
    data(){
        return {
            input : '',
        }
    },
    beforeDestroy(){
        this.$store.state.loading = false
    }
}
</script>

<style lang="scss">
@import '~style/input.scss';
@import '~style/button.scss';
.wrap{
    position: relative;
    z-index: 10;
    .btn{
        margin-left: 20px;
    }
}
</style>